<div id="contenedor" class="container">  
    <div class="row-fluid">
        <div class="row-fluid">
            <ul  class="span12 breadcrumb alingCenter">
                <li class="subtitleCostosgastos"><b><span id="spanGastosEncontrados"></span> gastos encontrados</b></li>
            </ul>
        </div>
    </div>
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home">HIstorial de gastos</a></li>
        <li><a href="costos">Tipos de gastos</a></li>
    </ul>
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <br>
                <form id="formularioBusquedacostoGasto">
                    <div class="span2">
                        Desde:
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-calendar"></i></span>
                            <input type="text" id="buscar-fechaIni" class="datePicker input-small search-cambiar" placeholder="dd/mm/aa"> 
                        </div>
                    </div>

                    <div class="span2">
                        Hasta:
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-calendar"></i></span>
                            <input type="text" id="buscar-fechaFin" class="datePicker input-small search-cambiar" placeholder="dd/mm/aa"> 
                        </div>
                    </div>
                    <div class="span2">  Tipo:
                        <select id="tipo-costo-selected" class="span12 search-cambiar">
                            <option value="-1" >Todas</option>
                            <?php foreach ($listaCostos as $listCostos) { ?>
                                <option value="<?php echo $listCostos->id_costo ?>"><?php echo $listCostos->nombre ?></option>
                            <?php } ?>                                        
                        </select> 
                    </div> 
                    <div class="span3">
                        Registrado por:
                        <select id="usuario" class="input-block-level search-cambiar">
                            <option value="">Seleccionar...</option>
                            <?php foreach ($usuarios as $row) { ?>
                                <option value="<?php echo $row->id_usuario ?>" <?php if (!empty($_GET["usuario"]) && $_GET["usuario"] == $row->id_usuario) echo "selected"; ?>> <?php echo $row->nombre_completo; ?></option>
                            <?php } ?>
                        </select>

                    </div>
                    <br>
                    <div class="span3 text-right">
                        <a href="#modalAgregarCliente" class="btn btn-primary" type="button" data-toggle="modal"> Registrar nuevo gasto</a>
                        <!-- <button type="button" class="btn btn-success">Exportar</button>  -->
                    </div> 
                    <div class="row-fluid hide">
                        <hr>
                        <div class="span6 offset3">
                            <button type="button" id="btn-buscar" class="btn btn-inverse">Buscar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">

            <div class="row-fluid">


                <div class="row-fluid">
                    <table class="table table-striped">
                        <thead>
                            <tr>                               
                                <th>Fecha</th>
                                <th>Tipo</th>
                                <th>Valor total</th>
                                <th>Forma de pago</th>
                                <th>Usuario</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="lista-costosGastos" data-pagina="1">
                        </tbody>
                    </table>
                </div>
                <div class="row-fluid">
                    <div class="pagination pull-right" id="pagination">

                    </div>
                </div>
            </div>
        </div>
    </div> 
    <div class="row-fluid ">
        <div class="alert alert-success span4 offset4">
            N° de gastos:  <strong id="divCantidadGastos"></strong> <br>
            Total por gastos: <strong id="divTotalGastos"></strong> <br>
        </div>
    </div>
</div>

<!--  I   N   S   E   R  C  I   O  N-->
<div class="movimientosVentasProductos">
    <div id="modalAgregarCliente" class="modal hide fade formularioRegistrarVenga" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Registrar un nuevo gasto <span id="nombreHabitacion"></span></h3>

        </div>
        <div class="paddingTop-1em">
            <div class="row-fluid">            
            </div>
            <div id="div-gasto">
                <form id="form-personas" action="costosGastos/nuevoHistorialCosto" method="post" class='formBlockDisplay'>
                    <input type="hidden" name="tipo-cliente" value="1">                    
                    <div class="row-fluid">                    
                        <div class="span12">
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Tipo de gasto</label>
                                </div>
                                <div class="span7">
                                    <select name="tipo-costo" required>
                                        <option value="">Seleccionar..</option>
                                        <?php foreach ($listaCostos as $listCostos) { ?>
                                            <option value="<?php echo $listCostos->id_costo ?>"><?php echo $listCostos->nombre ?></option>
                                        <?php } ?>                                        
                                    </select>    
                                </div>                      
                            </div>
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Fecha y hora</label>
                                </div>
                                <div class="span3">
                                    <input id="fechaCosto" class="datePicker input-small" type="text" required name="fechaCosto">    
                                </div>   
                                <div class="span2">
                                    <select id="horaCosto" name="horaCosto" class="input-mini">
                                        <option value="0">00</option>
                                        <option value="1">01</option>
                                        <option value="2">02</option>
                                        <option value="3">03</option>
                                        <option value="4">04</option>
                                        <option value="5">05</option>
                                        <option value="6">06</option>
                                        <option value="7">07</option>
                                        <option value="8">08</option>
                                        <option value="9">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="18">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                    </select>    
                                </div>
                                <div class="span2">
                                     <select id="minutoCosto" name="minutoCosto" class="input-mini">
                                        <option value="0">00</option>
                                        <option value="1">01</option>
                                        <option value="2">02</option>
                                        <option value="3">03</option>
                                        <option value="4">04</option>
                                        <option value="5">05</option>
                                        <option value="6">06</option>
                                        <option value="7">07</option>
                                        <option value="8">08</option>
                                        <option value="9">09</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option>
                                    </select> 
                                </div>
                            </div>
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Valor</label>
                                </div>
                                <div class="span7">
                                    <input  type="text" name="valor" class="money" required>    
                                </div>                      
                            </div>
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Descripción</label>
                                </div>
                                <div class="span7">
                                    <textarea name="descripcion"  rows="3"></textarea>  
                                </div>                      
                            </div>
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Forma de pago</label>
                                </div>
                                <div class="span7">                                 
                                    <select id="modoPagoSelected" required >
                                        <option value="1">Efectivo</option>
                                        <option value="2">Deposito Bancario</option>
                                        <option value="3">Tarjeta Debito</option>
                                        <option value="4">Tarjeta Crédito</option>
                                        <option value="5">Otro</option>
                                    </select>
                                    <input  name="modo_pago" id="FormaPago" type="hidden" >
                                    </select>   
                                </div>                      
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-inverse" id="costos-submit">Agregar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--  E  D  I  C  I  O  N-->
<div class="movimientosVentasProductos">
    <div id="modalVercosto" class="modal hide fade formularioRegistrarVenga" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            <h4 id="myModalLabel">Gasto registrado el <span id="fecha_gasto"></span> por <span id="usuario_name"></span></h4>
        </div>
        <div class="paddingTop-1em">       
            <div class="row-fluid">            
            </div>
            <div id="div-gasto">
                <form >
                    <input type="hidden" name="tipo-cliente" value="1">                    
                    <div class="row-fluid">                    
                        <div class="span12">
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Tipo de gasto</label>
                                </div>
                                <div class="span7">
                                    <select name="tipo-costo" readonly='readonly' id="costoId">
                                        <option value="-1">Seleccionar..</option>
                                        <?php foreach ($listaCostos as $listCostos) { ?>
                                            <option value="<?php echo $listCostos->id_costo ?>"><?php echo $listCostos->nombre ?></option>
                                        <?php } ?>                                        
                                    </select>    
                                </div>                      
                            </div>
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Valor</label>
                                </div>
                                <div class="span7">
                                    <input id="valorShow" type="text" readonly='readonly'  name="valor" >    
                                </div>                      
                            </div>
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Descripción</label>
                                </div>
                                <div class="span7">
                                    <textarea name="descripcion"  readonly='readonly' rows="3" id="descripcionShow"></textarea>  
                                </div>                      
                            </div>
                            <div class="row-fluid">                              
                                <div class="span4 offset1 alignContent">
                                    <label >Forma de pago</label>
                                </div>
                                <div class="span7">                                 
                                    <input id="ModoPagoShow" type="text" name="modo_pago" readonly='readonly'>  
                                </div>                      
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal">Aceptar</button>
                    </div>
                </form>
            </div>       
        </div>
    </div>
</div>


<!--  D E L E T E -->
<div id="confirmatioDelete" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form id="eliminarVenta" class="formBlockDisplay"  method="post" autocomplete="off">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel2">Eliminar costo  <span class="hide" id="id_CostoM"></span></h3> 
        </div>
        <div class="modal-body"> 
            <h4>¿Desea eliminar el costo seleccionado?</h4>
        </div>
        <div class="modal-footer">
            <a id="eliminarCostoOk" class="btn btn-primary" data-dismiss="modal">Aceptar</a>
            <a id="cancelarEliminar" class="btn" data-dismiss="modal">Cancelar</a>
        </div>
    </form>

</div>


